<template>
  <div class="platformEquipment">
    <div class="header">
      <div class="header_left">
        <el-dropdown @command="handleCommand">
          <div class="el-dropdown-link">
            {{ proname }}
            <img src="../../assets/images/cut.png" alt class="cut" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in project"
              :key="item.id"
              :command="item.id"
              >{{ item.projectName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <div class="primary">
          <el-button
            v-if="value && value !== '' && value !== null"
            type="primary"
            size="small"
            @click="add"
            >添加设备</el-button
          >
          <el-button type="danger" size="small" @click="showdevice"
            >导出设备</el-button
          >
          <el-button @click="handlerAddDevice" size="small" type="success"
            >导入设备</el-button
          >
          <el-button
            size="small"
            @click="handlertest"
            style="background-color:#333;color:#fff"
            >同步测试</el-button
          >
        </div>
      </div>
      <div>
        <el-button @click="handlerdeviceout" type="success"
          >导出二维码</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="search">
        <el-form
          :inline="true"
          :model="formInline"
          size="small"
          label-width="70px"
        >
          <el-form-item label="设备编号">
            <el-input
              v-model="formInline.code"
              placeholder="请输入设备编号"
              clearable
              @change="getProject"
            ></el-input>
          </el-form-item>
          <el-form-item label="uuid">
            <el-input
              v-model="formInline.uuid"
              placeholder="请输入设备uid"
              clearable
              @change="getProject"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备名称">
            <el-select
              @change="changeSelect($event, 'name')"
              v-model="formInline.name"
              placeholder="请选择设备名称"
              filterable
              clearable
            >
              <el-option
                v-for="item in device"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  item.version
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select
              v-model="formInline.type"
              placeholder="请选择设备类型"
              @change="changeSelect($event, 'type')"
              filterable
              clearable
            >
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备型号">
            <el-select
              v-model="formInline.version"
              placeholder="请选择设备型号"
              @change="changeSelect($event, 'version')"
              filterable
              clearable
            >
              <el-option
                v-for="item in equipmentModel"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属分支">
            <el-cascader
              v-model="workingStr"
              :options="workingWordOption"
              :props="workingWordProps"
              @change="projectChange1"
              clearable
            ></el-cascader>
          </el-form-item>

          <el-form-item>
            <el-button @click="search">确认搜索</el-button>
          </el-form-item>
          <el-form-item> 总设备数 :{{ onCount }} </el-form-item>
          <el-form-item>
            在线设备数: <span style="color:#99CC66">{{ offCount }}</span>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        class="table"
        ref="table"
        :data="tableData"
        border
        :header-cell-style="{
          width: '100%',
          background: '#FAFAFA',
          color: '#606266',
          height: '60px'
        }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          label="序号"
          prop="no"
          width="100"
          align="center"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <el-table-column
          label="设备信息"
          prop="name"
          min-width="400"
          align="center"
          :show-overflow-tooltip="tooltip"
        >
          <template slot-scope="scope">
            <div
              class="name content"
              @click="detail(scope.row)"
              style="cursor: pointer"
            >
              <viewer>
                <img
                  alt
                  :src="
                    !scope.row.devicePicture ||
                    scope.row.devicePicture === '' ||
                    scope.row.devicePicture === null
                      ? errImg
                      : scope.row.devicePicture
                  "
                  :onerror="errImg"
                  title="查看高清图片"
                  class="img"
                />
              </viewer>
              <div>
                <div class="name">
                  <img src="../../assets/images/code.png" alt class="icon" />
                  <div class="label">设备编号:{{ scope.row.deviceNumber }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/name.png" alt class="icon" />
                  <div class="label">设备名称:{{ scope.row.name }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/type.png" alt class="icon" />
                  <div class="label">设备类型:{{ scope.row.type_name }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/model.png" alt class="icon" />
                  <div class="label">设备型号:{{ scope.row.model_name }}</div>
                </div>
                <div class="name">
                  <img src="../../assets/images/branch.png" alt class="icon" />
                  <div class="label">
                    所属分支: {{ scope.row.projectName }}
                    {{
                      scope.row.groupName &&
                      scope.row.groupName !== "" &&
                      scope.row.groupName !== null
                        ? "/" + scope.row.groupName
                        : ""
                    }}
                    {{
                      scope.row.storeName &&
                      scope.row.storeName !== "" &&
                      scope.row.storeName !== null
                        ? "/" + scope.row.storeName
                        : ""
                    }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="设备图片"
          width="140"
          align="center"
          :show-overflow-tooltip="tooltip"
        >
          <template slot-scope="scope">
            <el-link
              type="success"
              @click="
                handlerGenerateCode(
                  scope.row.deviceNumber,
                  scope.row.id,
                  scope.row.uuid
                )
              "
              >生成二维码</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="设备监控信息"
          width="140"
          align="center"
          :show-overflow-tooltip="tooltip"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="detail(scope.row)"
              >查看详情</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="warningNum"
          label="设备状态信息"
          width="120"
          align="center"
        >
          <template slot-scope="scoped">
            <div>
              <el-link type="danger" v-if="scoped.row.openStatus == 2"
                >关机</el-link
              >
              <el-link type="success" v-else-if="scoped.row.openStatus == 1"
                >开机</el-link
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="网络状态"
          prop="offline"
          width="140"
          align="center"
          :show-overflow-tooltip="tooltip"
        >
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.offline == 1" type="success">在线</el-tag>
              <el-tag type="info" v-else-if="scope.row.offline == 2"
                >离线</el-tag
              >
            </div>
            <!-- <div style="display: flex;justify-content: center;">
              <div
                :class="scope.row.status===1?'normal':(scope.row.status===2?'maintain':(scope.row.status===3?'warning':(scope.row.status===4?'upkeep':'offline')))"
                class="status"
              >{{scope.row.tast===1?'正常运行':(scope.row.tast===2?'设备维修':(scope.row.tast===3?'设备告警':(scope.row.tast===4?'设备保养':'设备离线')))}}</div>
            </div>-->
          </template>
        </el-table-column>
        <el-table-column
          label="设备状态"
          prop="tast"
          width="140"
          align="center"
          :show-overflow-tooltip="tooltip"
        >
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.tast == 1" type="success">正常</el-tag>
              <el-tag type="info" v-else-if="scope.row.tast == 0">未知</el-tag>
              <el-tag type="danger" v-else-if="scope.row.tast == 2"
                >告警</el-tag
              >
              <el-tag v-else-if="scope.row.tast == 3">保养</el-tag>
              <el-tag type="warning" v-else-if="scope.row.tast == 4"
                >维修</el-tag
              >
            </div>
            <!-- <div style="display: flex;justify-content: center;">
              <div
                :class="scope.row.status===1?'normal':(scope.row.status===2?'maintain':(scope.row.status===3?'warning':(scope.row.status===4?'upkeep':'offline')))"
                class="status"
              >{{scope.row.tast===1?'正常运行':(scope.row.tast===2?'设备维修':(scope.row.tast===3?'设备告警':(scope.row.tast===4?'设备保养':'设备离线')))}}</div>
            </div>-->
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="operation" width="400">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="small"
              @click="turn(scope.row)"
              style="margin: 10px 5px"
              >设备调转</el-button
            >
            <!-- <el-button type="danger" plain size="small" @click="toogel(scope.row.uuid)">切换模式</el-button> -->
            <el-button
              type="success"
              plain
              size="small"
              @click="edit(scope.row)"
              style="margin: 10px 5px"
              >编辑</el-button
            >
            <el-button
              type="warning"
              plain
              size="small"
              @click="view(scope.row)"
              >查看</el-button
            >
            <el-button type="danger" plain size="small" @click="handlerdel"
              >删除</el-button
            >
            <!-- <el-button
              plain
              type="info"
              size="small"
              @click="upgrade(scope.row.id,scope.row.uuid)"
            >升级</el-button>-->

            <!-- <el-button plain size="small"    style="margin:10px 0"  @click="parameter(scope.row.uuid)">温度参数配置</el-button> -->
            <el-select
              v-model="selectArea[scope.row.id]"
              value-key="name"
              @change="
                selectAreaChange(
                  scope.row.id,
                  $event,
                  scope.row.uuid,
                  scope.row.openStatus
                )
              "
              placeholder="更多操作"
              style="width: 150px"
              clearable
            >
              <el-option
                v-for="item in updateList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <!-- <el-button @click="handlerUpVersion(scope.row.uuid)">一键升级</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <el-drawer
      @close="resetForm('ruleForm')"
      :title="type"
      size="640px"
      custom-class="custom-drawer"
      :visible.sync="visible"
    >
      <el-form
        size="small"
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="el-drawer-ruleForm"
      >
        <el-form-item label="设备编号" prop="code">
          <el-input
            v-model="ruleForm.code"
            clearable
            placeholder="请输入设备编号"
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <el-form-item label="设备名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            clearable
            placeholder="请输入设备名称"
            :readonly="readonly"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="公司名称:" prop="companyId">
          <el-select
            v-model="ruleForm.companyId"
            clearable
            placeholder="请选择公司名称"
            @change="handlercompanyId"
          >
            <el-option
              v-for="item in companySelList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备类型" prop="type">
              <el-select
                class="formItem"
                :readonly="readonly"
                v-model="ruleForm.type"
                placeholder="请选择设备类型"
                filterable
                clearable
                @change="handlerType"
                :disabled="devicedisabled1"
              >
                <el-option
                  v-for="item in typeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备型号" prop="modelNumber">
              <el-select
                :readonly="readonly"
                class="formItem"
                v-model="ruleForm.modelNumber"
                placeholder="请选择设备型号"
                filterable
                clearable
                :disabled="devicedisabled1"
              >
                <el-option
                  v-for="item in equipmentModel"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备容量" prop="capacity">
              <el-input
                v-model="ruleForm.capacity"
                clearable
                placeholder="请输入设备容量"
                :readonly="readonly"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备尺寸" prop="size">
              <el-input
                v-model="ruleForm.size"
                clearable
                placeholder="请输入设备尺寸"
                :readonly="readonly"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-form-item label="设备监控项" prop="monitor">
          <el-select
            :disabled="readonly"
            style="width: 100%"
            v-model="ruleForm.monitor"
            placeholder="请选择设备监控项"
            multiple
            filterable
            clearable
          >
            <el-option
              v-for="item in monitorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="调转项目" prop="project_id" v-if="type == 'add'">
          <el-select
            class="formItem"
            @change="onChange($event, 'project_id')"
            v-model="ruleForm.project_id"
            placeholder="请选择调转项目"
            filterable
            clearable
          >
            <el-option
              v-for="item in project"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转组"
          v-show="
            ruleForm.project_id &&
              ruleForm.project_id !== '' &&
              ruleForm.project_id !== null
          "
          prop="group_id"
          v-if="type == 'add'"
        >
          <el-select
            class="formItem"
            @change="onChange($event, 'group_id')"
            v-model="ruleForm.group_id"
            placeholder="请选择调转组"
            filterable
            clearable
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转门店"
          v-show="
            ruleForm.group_id &&
              ruleForm.group_id !== '' &&
              ruleForm.group_id !== null
          "
          prop="store_id"
          v-if="type == 'add'"
        >
          <el-select
            class="formItem"
            v-model="ruleForm.store_id"
            placeholder="请选择调转门店"
            filterable
            clearable
          >
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.storeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="保修期" prop="warranty">
              <el-input
                :readonly="readonly"
                class="formItem"
                oninput="this.value=this.value.replace(/[^\d.]/g,'');"
                maxlength="10"
                v-model="ruleForm.warranty"
                placeholder="请输入保修期"
                clearable
              >
                <span slot="suffix">年</span>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="温控器型号" prop="model">
              <el-input
                :readonly="readonly"
                class="formItem"
                v-model="ruleForm.model"
                placeholder="请输入温控器型号"
                clearable
                :disabled="devicedisabled"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="温控器版本" prop="version">
              <el-select
                class="formItem"
                :readonly="readonly"
                v-model="ruleForm.version"
                placeholder="请选择温控器版本"
                filterable
                clearable
                :disabled="devicedisabled"
              >
                <el-option
                  v-for="item in versionList"
                  :key="item.id"
                  :label="item.versionNumber"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="温控器ID" prop="temperature">
          <el-input
            :readonly="readonly"
            class="formItem"
            v-model="ruleForm.temperature"
            placeholder="请输入温控器ID"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="检测芯片ID" prop="detectionChip">
          <el-input
            :readonly="readonly"
            v-model="ruleForm.detectionChip"
            placeholder="请输入检测芯片ID"
            clearable
          ></el-input>
        </el-form-item> -->
        <el-form-item label="制造厂商" prop="manufacturer">
          <el-input
            :readonly="readonly"
            v-model="ruleForm.manufacturer"
            placeholder="请输入制造厂商"
            clearable
          ></el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="生产日期" prop="production">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.production"
                placeholder="请选择生产日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出厂日期" prop="manufacture">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.manufacture"
                placeholder="请选择出厂日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="入库日期" prop="warehouse">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.warehouse"
                placeholder="请选择入库日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装日期" prop="install">
              <el-date-picker
                :readonly="readonly"
                class="formItem"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                v-model="ruleForm.install"
                placeholder="请选择安装日期"
                type="date"
                clearable
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="el-drawer__footer">
        <el-button
          :readonly="readonly"
          type="primary"
          @click.prevent="submitForm('ruleForm')"
          :loading="confirmLoading"
          >{{ confirmLoading ? "保 存 中..." : "保 存" }}</el-button
        >
        <el-button :readonly="readonly" @click="resetForm('ruleForm')"
          >取 消</el-button
        >
      </div>
    </el-drawer>
    <!-- 设备调转 -->
    <el-dialog
      title="设备调转"
      :visible.sync="dialog"
      @close="clearForm('dialogForm')"
      width="540px"
    >
      <el-form
        class="el-form-dialog"
        :model="dialogForm"
        :rules="dialogRules"
        ref="dialogForm"
        label-width="80px"
      >
        <el-form-item label="当前项目">
          <el-input
            v-model="dialogForm.project"
            readonly
            placeholder="请输入当前项目"
          ></el-input>
        </el-form-item>
        <el-form-item label="当前组">
          <el-input
            v-model="dialogForm.group"
            readonly
            placeholder="请输入当前组"
          ></el-input>
        </el-form-item>
        <el-form-item label="当前门店">
          <el-input
            v-model="dialogForm.store"
            readonly
            placeholder="请输入当前门店"
          ></el-input>
        </el-form-item>
        <el-form-item label="调转项目" prop="project_id">
          <el-select
            class="formItem"
            @change="onChange($event, 'project_id')"
            v-model="dialogForm.project_id"
            placeholder="请选择调转项目"
            filterable
            clearable
          >
            <el-option
              v-for="item in project"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转组"
          v-show="
            dialogForm.project_id &&
              dialogForm.project_id !== '' &&
              dialogForm.project_id !== null
          "
          prop="group_id"
        >
          <el-select
            class="formItem"
            @change="onChange($event, 'group_id')"
            v-model="dialogForm.group_id"
            placeholder="请选择调转组"
            filterable
            clearable
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转门店"
          v-show="
            dialogForm.group_id &&
              dialogForm.group_id !== '' &&
              dialogForm.group_id !== null
          "
          prop="store_id"
        >
          <el-select
            class="formItem"
            v-model="dialogForm.store_id"
            placeholder="请选择调转门店"
            filterable
            clearable
          >
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.storeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="readonly" @click="clearForm('dialogForm')"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click.prevent="saveForm('dialogForm')"
          :loading="confirmLoading"
          >{{ confirmLoading ? "保 存 中..." : "保 存" }}</el-button
        >
      </div>
    </el-dialog>
    <!--生成设备二维码 -->
    <el-dialog
      title="查看设备图片"
      :visible.sync="deviceMakeQrcodeVisible"
      width="30%"
    >
      <img :src="devicePic" alt class="deviceimg" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="deviceMakeQrcodeVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 版本号升级 -->
    <el-dialog
      title="版本号升级"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="versionForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="版本号" prop="version">
          <el-select
            v-model="versionForm.version"
            placeholder="请选择升级的版本"
          >
            <el-option
              v-for="item in versionList"
              :label="item.versionNumber"
              :value="item.versionNumber"
              :key="item.versionNumber"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlerQu">取 消</el-button>
        <el-button type="primary" @click="handlerVersion">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 等待中 -->
    <el-dialog
      :title="titleName"
      :visible.sync="dialogVisibleWating"
      width="30%"
      :before-close="handleClose"
    >
      <span>等待中.....</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleWating = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >下一步</el-button
        >
      </span>
    </el-dialog>
    <!-- 点击确定切换 -->
    <el-dialog
      title="切换版本"
      :visible.sync="dialogVisibleToole"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="tooleRef" :model="tooleForm" label-width="80px">
        <el-form-item label="切换模式">
          <el-select v-model="tooleForm.type" placeholder="请选择切换模式">
            <el-option
              v-for="item in TypeList"
              :label="item.name"
              :value="item.type"
              :key="item.type"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlercancel">取 消</el-button>
        <el-button type="primary" @click="handlerTolle">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击设备导出 -->
    <el-dialog
      title="设备导出"
      :visible.sync="DevicedialogVisible"
      width="30%"
      :before-close="uploadhandler"
    >
      <el-form
        :model="logoutForm"
        :rules="logoutRules"
        ref="logoutruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="设备类型" prop="typeId">
          <el-select
            class="formItem"
            v-model="logoutForm.typeId"
            placeholder="请选择设备类型"
            filterable
            clearable
            @change="handlerType"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备型号" prop="modelId">
          <el-select
            class="formItem"
            v-model="logoutForm.modelId"
            placeholder="请选择设备型号"
            filterable
            clearable
            @change="handlerModel"
          >
            <el-option
              v-for="item in equipmentModel"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="设备监控项" prop="deviceMonitorId">
          <el-select
            style="width: 100%"
            v-model="logoutForm.deviceMonitorId"
            placeholder="请选择设备监控项"
            multiple
            filterable
            clearable
            @change="handlerMotior"
          >
            <el-option
              v-for="item in monitorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="温控器版本" prop="versionId">
          <el-select
            class="formItem"
            v-model="logoutForm.versionId"
            placeholder="请选择温控器版本"
            filterable
            clearable
            @change="getversion"
          >
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.versionNumber"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备数量" prop="number">
          <el-input
            v-model="logoutForm.number"
            placeholder="请输入设备数量"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DevicedialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerdeviceOut">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击设备导入 -->
    <el-dialog
      title="设备导入"
      :visible.sync="DeviceAdddialogVisible"
      width="30%"
      :before-close="Inloadhandler"
    >
      <el-upload
        class="upload-demo"
        ref="upload"
        :action="action"
        :auto-upload="false"
        :data="fileData"
        :on-error="uploadError"
        :on-success="handle_success"
      >
        <el-button slot="trigger" size="small" class="iconfont icon-daoruexcel">
          <i style="margin-right: 3px"></i>导入Excel
        </el-button>
        <div slot="tip" class="el-upload__tip">
          只 能 上 传 xlsx / xls 文 件
        </div>
      </el-upload>
      <el-form
        :model="fileData"
        ref="fileRuleForm"
        label-width="100px"
        class="demo-ruleForm"
        style="margin-top: 30px"
      >
        <el-form-item label="调转项目" prop="project_id">
          <el-select
            class="formItem"
            @change="onChange($event, 'project_id')"
            v-model="fileData.projectId"
            placeholder="请选择调转项目"
            filterable
            clearable
          >
            <el-option
              v-for="item in project"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转组"
          v-show="
            fileData.projectId &&
              fileData.projectId !== '' &&
              fileData.projectId !== null
          "
          prop="group_id"
        >
          <el-select
            class="formItem"
            @change="onChange($event, 'group_id')"
            v-model="fileData.groupId"
            placeholder="请选择调转组"
            filterable
            clearable
          >
            <el-option
              v-for="item in groupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="调转门店"
          v-show="
            fileData.groupId &&
              fileData.groupId !== '' &&
              fileData.groupId !== null
          "
          prop="store_id"
        >
          <el-select
            class="formItem"
            v-model="fileData.storeId"
            placeholder="请选择调转门店"
            filterable
            clearable
          >
            <el-option
              v-for="item in storeList"
              :key="item.id"
              :label="item.storeName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DeviceAdddialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确定导入</el-button>
      </span>
    </el-dialog>

    <!-- 升级的步骤条 -->
    <el-dialog
      title="一键升级"
      :visible.sync="shengjidialogVisible"
      width="50%"
    >
      <el-steps
        :active="active"
        finish-status="success"
        align-center
        style="margin-bottom: 50px"
      >
        <el-step title="获取version版本号"></el-step>
        <el-step title="更新模式为DFU"></el-step>
        <el-step title="更新dfu 目标扇区 "></el-step>
        <el-step title="升级"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <div style="height: 80px"></div>
      <!-- <el-button
        style="margin-top: 40px; margin: 40px"
        @click="next"
        type="warning"
        >下一步</el-button
      > -->
    </el-dialog>
    <el-dialog title="提示" :visible.sync="ProgressdialogVisible" width="30%">
      <el-progress
        :text-inside="true"
        :stroke-width="26"
        :percentage="progressLine * 100"
      ></el-progress>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="ProgressdialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerProgress">确 定</el-button>
      </span> -->
    </el-dialog>
    <!-- 点击同步测试 -->
    <el-dialog
      title="同步测试"
      :visible.sync="dialogVisibleTest"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :inline="true"
        :model="copyForm"
        :rules="copyrules"
        ref="copyRef"
        class="demo-form-inline"
      >
        <!-- <el-form-item>
            <el-button type="success" @click="handlerDefalut">默认值同步</el-button>
            <el-button @click="handlerShiji">实际值同步</el-button>
          </el-form-item>-->
        <el-form-item label="复制的模板" prop="theFormId">
          <el-select
            v-model="copyForm.theFormId"
            placeholder="请选择复制的模板"
          >
            <el-option
              v-for="item in copyList"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleTest = false">取 消</el-button>
        <el-button type="primary" @click="handlerTest">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getProject,
  getDeviceList,
  devicTypeList,
  devicModelList,
  getStoreList,
  deviceMonitorList,
  deviceList,
  getVersionList,
  deviceDetails,
  deviceAdd,
  deviceEdit,
  deviceTransfer,
  getWhereGroup,
  getWhereStore,
  deviceInformation,
  deviceMakeQrcode,
  projectlist,
  sendF2,
  sendF7,
  sendF0,
  sendF3,
  sendF4,
  sendF6,
  sendReadF1,
  getDeviceVer,
  companySel,
  sendFBOff,
  sendFBOpen,
  deviceOut,
  deviceAddAll,
  OneClickUpgrade,
  getVersionProgress,
  deviceQrcode,
  deleteDevice,
  getFormworkSelect,
  synchroWriteF1All
} from "../../utils/api";
import { mapState, mapGetters } from "vuex";
import { Excel } from "../../utils/common";
import ExcelIn from "../../components/ExcelIn";
//平台设备管理
export default {
  name: "PlatformEquipment",
  props: ["height"],
  components: {
    ExcelIn
  },
  inject: ["reload"],
  data() {
    return {
      progressLine: "",
      // 进度条的弹框
      ProgressdialogVisible: false,
      shengjiUid: "",
      // 升级
      active: 0,
      // 升级步骤的弹框
      shengjidialogVisible: false,
      fileData: {
        companyId: "",
        userId: "",
        projectId: "",
        storeId: "",
        groupId: ""
      },

      action: "https://devicedata.wadd.vip/api/v1.Mydevice/deviceAddAll",
      // 导出的表单
      logoutForm: {
        typeId: "",
        typeName: "",
        modelId: "",
        modelName: "",
        // deviceMonitorId: "",
        deviceMonitorName: "",
        versionId: "",
        versionName: "",
        number: ""
      },
      logoutRules: {
        typeId: [
          { required: true, message: "请选择设备类型", trigger: "blur" }
        ],
        modelId: [
          { required: true, message: "请选择设备型号", trigger: "blur" }
        ],
        // deviceMonitorId: [
        //   { required: true, message: "请选择设备监控项", trigger: "blur" }
        // ],
        versionId: [
          { required: true, message: "请选择版本号", trigger: "blur" }
        ]
      },
      // 导入的数据
      // InForm: {
      //   file: "",
      //   companyId: "",
      //   userId: "",
      //   projectId: "",
      //   storeId: "",
      //   groupId: ""
      // },
      // excel
      excelFile: "",
      // 导出设备的显示隐藏
      DevicedialogVisible: false,
      // 导入 设备的显示隐藏
      DeviceAdddialogVisible: false,
      readonly: false, //禁用表单
      errImg: 'this.src="' + require("../../assets/images/chest.png") + '"',
      formInline: {
        code: "", //设备编号
        name: "", //设备名称
        version: "", //设备型号
        type: "", //设备类型
        branch: "", //
        pageSize: 100000,
        pageNumber: 1,
        uuid: "",
        groupid: ""
      },
      value: "", //项目id
      project: [], //项目列表
      typeList: [], //设备类型列表
      equipmentModel: [], //设备型号列表
      group: [], //所属分支列表
      device: [], //设备列表
      versionList: [], //温控器版本列表
      monitorList: [], //设备监控项列表
      groupList: [], //调转组列表
      storeList: [], //调转门店列表
      tableData: [], //表格数据
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //总条数
      currentPage: 1, //当前页
      pageSize: 10, //每页条数
      tooltip: true,
      visible: false,
      confirmLoading: false, //按钮加载
      type: "添加设备",
      ruleForm: {
        name: "", //设备名称
        code: "", //设备编号
        type: "", //设备类型
        capacity: "", //容量
        size: "", //大小
        modelNumber: "", //设备型号,
        warranty: "1", //保修期
        temperature: "", //温控器ID
        version: "", //温控器版本
        monitor: [], //设备监控项
        model: "", //温控器型号
        // detectionChip: "", //检测芯片ID
        manufacturer: "", //制造厂商
        production: "", //生产日期
        warehouse: "", //入库日期
        manufacture: "", //出厂日期
        install: "", //安装日期
        project_id: "", //调转项目
        group_id: "", //调转组
        store_id: "", //调转门店
        id: "", //设备id
        companyId: "" //公司id
      },
      rules: {
        name: [
          { required: true, message: "请输入设备名称", trigger: "change" }
        ],
        companyId: [
          { required: true, message: "请选择公司", trigger: "change" }
        ],
        capacity: [
          { required: true, message: "请输入设备容量", trigger: "change" }
        ],
        size: [
          { required: true, message: "请输入设备大小", trigger: "change" }
        ],
        code: [
          { required: true, message: "请输入设备编号", trigger: "change" }
        ],
        type: [
          { required: true, message: "请选择设备类型", trigger: "change" }
        ],
        modelNumber: [
          { required: true, message: "请选择设备型号", trigger: "change" }
        ],
        warranty: [
          { required: true, message: "请输入保修期", trigger: "change" }
        ],
        temperature: [
          { required: true, message: "请输入温控器ID", trigger: "change" }
        ],
        model: [
          { required: true, message: "请输入温控器型号", trigger: "change" }
        ],
        // version: [
        //   { required: true, message: "请选择温控器版本", trigger: "change" }
        // ],
        monitor: [
          { required: true, message: "请选择设备监控项", trigger: "change" }
        ],
        // detectionChip: [
        //   { required: true, message: "请输入检测芯片ID", trigger: "change" },
        // ],
        project_id: [
          { required: true, message: "请选择调转项目", trigger: "change" }
        ],
        group_id: [
          { required: true, message: "请选择调转组", trigger: "change" }
        ],
        store_id: [
          { required: true, message: "请选择调转门店", trigger: "change" }
        ],
        manufacturer: [
          { required: true, message: "请输入厂商", trigger: "blur" }
        ],
        production: [
          { required: true, message: "请输入生产日期", trigger: "blur" }
        ],
        manufacture: [
          { required: true, message: "请输入出场日期", trigger: "blur" }
        ],
        warehouse: [
          { required: true, message: "请输入入库日期", trigger: "blur" }
        ],
        install: [{ required: true, message: "请输入安装期", trigger: "blur" }]
      },
      pickerOptions: {
        disabledDate: time => time.getTime() > new Date() * 1 + 600 * 1000
      }, //配置日期选择器,禁用今日之后的日期
      userId: "", //用户信息id
      currentRow: {}, //当前行信息
      //设备调转
      dialog: false,
      dialogForm: {
        project: "", //当前项目
        group: "", //当前组
        store: "", //当前门店
        project_id: "", //调转项目
        group_id: "", //调转组
        store_id: "" //调转门店
      },
      dialogRules: {
        project_id: [
          { required: true, message: "请选择调转项目", trigger: "change" }
        ],
        group_id: [
          { required: true, message: "请选择调转组", trigger: "change" }
        ],
        store_id: [
          { required: true, message: "请选择调转门店", trigger: "change" }
        ]
      },
      typeID: "",
      // 生成设备的弹框
      deviceMakeQrcodeVisible: false,
      // 二维码图片
      devicePic: "",
      // 三级选中的数据
      workingStr: "",
      //接口返回的数据
      workingWordOption: [],
      // 设备分支的label chldren
      workingWordProps: {
        label: "name",
        children: "children",
        value: "id",
        checkStrictly: true
      },
      // 版本号升级的弹框
      dialogVisible: false,
      // 版本号数据
      versionList: [],
      // 版本号升级的数据
      versionForm: {
        version: "",
        uid: ""
      },
      // 等待中
      dialogVisibleWating: false,
      // 定时器
      timer: null,
      // 更新的数组
      updateList: [
        // {
        //   id: 1,
        //   name: "更新版本",
        // },
        // {
        //   id: 2,
        //   name: "更新模式 ",
        // },
        // {
        //   id: 3,
        //   name: "更新扇区",
        // },
        // {
        //   id: 4,
        //   name: "更新制冷模式",
        // },
        // {
        //   id: 5,
        //   name: "切换模式",
        // },
        // {
        //   id: 6,
        //   name: "升级",
        // },
        // {
        //   id: 8,
        //   name: "读取温控参数",
        // },
        {
          id: 6,
          name: "一键升级"
        },
        {
          id: 7,
          name: "配置温控参数"
        },
        {
          id: 9,
          name: "开机"
        },
        {
          id: 10,
          name: "关机"
        }
      ],
      // 选择的值
      selectArea: [],
      // 等待中弹框的值
      titleName: "版本升级",
      // 切换的表单
      tooleForm: {
        type: "",
        uid: ""
      },
      // 切换类型数据
      TypeList: [
        {
          type: 1,
          name: "Application 模式"
        },
        {
          type: 2,
          name: "DFU 模式 "
        }
      ],
      // 切换的弹框
      dialogVisibleToole: false,
      // 公司的列表
      companySelList: [],
      progressTimer: null,
      devicedisabled: false,
      devicedisabled1: false,
      // 删除设备的id数组
      devicearrId: [],
      //模版的数据
      copyList: [],

      // 同步测试的显示和隐藏
      dialogVisibleTest: false,
      copyForm: {
        theFormId: "",
        uidArr: [],
        limitTime: 10
      },
      // 模板的校验
      copyrules: {
        theFormId: [{ required: true, message: "请选择模板", trigger: "blur" }]
      },
      // 离线设备数
      offCount: "",
      // 在线设备数
      onCount: ""
    };
  },

  async created() {
    this.value = window.sessionStorage.getItem("projectId");
    this.userId = sessionStorage.getItem("userId");
    this.currentPage =
      Number(window.sessionStorage.getItem("curentpage")) == ""
        ? 1
        : Number(window.sessionStorage.getItem("curentpage"));
    this.getDataInit();
  },
  computed: {
    ...mapState(["org_id"]),
    proname() {
      if (this.project.length == 0) {
        return "";
      }
      const index = this.project.filter(v => v.id == this.value)[0];
      return index["projectName"];
    }
  },
  watch: {
    org_id(val) {
      window.sessionStorage.removeItem("projectId");
      this.currentPage = 1;
      this.getProject();
      this.getSelect();
      this.getCopy();
    }
  },
  methods: {
    // 多选 删除设备
    handleSelectionChange(val) {
      val.map(item => {
        this.devicearrId.push(item.id);
        this.copyForm.uidArr.push(item.uuid);
      });
      // console.log(this.copyForm.uidArr);

      this.devicearrId = Array.from(new Set(this.devicearrId));
      this.copyForm.uidArr = Array.from(new Set(this.copyForm.uidArr));
    },
    // 点击删除
    handlerdel() {
      if (this.devicearrId.length == 0) {
        this.$message.error("请选择删除的设备");
      } else {
        this.devicearrId = JSON.stringify(this.devicearrId);
        // console.log(this.devicearrId);
        this.$confirm("你确定删除所选的设备吗啊?, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.postRequest(deleteDevice, { devIdArr: this.devicearrId }).then(
              res => {
                if (res.code == 200) {
                  this.$message({
                    type: "success",
                    message: "删除设备成功!"
                  });
                  this.getData();
                }
              }
            );
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除设备"
            });
          });
      }
    },
    projectChange1(workingStr) {
      this.formInline.groupid = workingStr[1];
      this.formInline.branch = workingStr[2];
      this.getProject();
    },
    //多选设备 同步测试 配置温控参数
    handlertest() {
      if (this.copyForm.uidArr == 0) {
        this.$message.error("请选择配置温控参数的设备");
      } else {
        this.dialogVisibleTest = !this.dialogVisibleTest;
        this.getCopy();
      }
    },
    // 获取模版列表
    getCopy() {
      this.postRequest(getFormworkSelect, { companyId: this.org_id }).then(
        res => {
          if (res.code == 200) {
            this.copyList = res.data;
          }
        }
      );
    },
    // 点击确定同步
    handlerTest() {
      this.$refs.copyRef.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        this.copyForm.uidArr = JSON.stringify(this.copyForm.uidArr);
        this.postRequest(synchroWriteF1All, this.copyForm).then(res => {
          if (res.code == 200) {
            const loading = this.$loading({
              lock: true,
              text: "配置中,请勿关闭!",
              background: "rgba(0, 0, 0, 0.5)"
            });

            loading.close();
            this.$message.success("同步测试成功");
            this.dialogVisibleTest = false;
            this.$refs.copyRef.resetFields();
            this.reload();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
              duration: 0
            });
            this.dialogVisibleTest = false;
            this.reload();
          }
        });
      });
    },
    // 导出 二维码
    handlerdeviceout() {
      const { code, name, version, type, branch } = this.formInline;
      const params = {
        type: 1, //1-平台设备管理列表,2-未分发设备列表
        projectId: this.value,
        pageSize: this.formInline.pageSize,
        pageNumber: this.formInline.pageNumber,
        deviceNumber: code, //设备编号
        nameId: name, //设备名称
        typeId: type, //设备类型
        modelId: version, //设备型号
        storeId: branch, //所属分支
        companyId: this.org_id
      };
      Excel(deviceQrcode, params, "导出二维码", "POST");
    },
    // 点击空白取消弹框
    uploadhandler() {
      this.DevicedialogVisible = false;
      this.$refs.logoutruleForm.resetFields();
      this.logoutForm = {};
    },
    Inloadhandler() {
      this.DeviceAdddialogVisible = false;
      this.$refs.fileRuleForm.resetFields();
      this.fileData = {};
    },
    // 点击设备导出显示弹框
    showdevice() {
      this.DevicedialogVisible = !this.DevicedialogVisible;
      this.getMonitorList();
    },
    // 点击设备导入的弹框
    handlerAddDevice() {
      this.DeviceAdddialogVisible = !this.DeviceAdddialogVisible;
    },
    uploadError(response, file, fileList) {
      // console.log(response, file, fileList);
    },
    // 获取导入设备的地址
    submitUpload(res) {
      // console.log(res);
      this.fileData.companyId = this.org_id;
      this.fileData.userId = this.userId;

      this.$refs.upload.submit();
      this.getDataInit();
      this.$refs.fileRuleForm.resetFields();
      this.fileData = {};
      this.DeviceAdddialogVisible = false;
    },
    handle_success(res) {
      if (res.code == 400) {
        this.$message.error(res.msg);
      } else {
        this.$message.success("导入设备成功");
      }
    },
    // 点击确定的导出
    handlerdeviceOut() {
      // this.logoutForm.deviceMonitorId = this.logoutForm.deviceMonitorId.join(
      //   ","
      // );
      // this.logoutForm.deviceMonitorName = this.logoutForm.deviceMonitorName.join(
      //   ","
      // );
      Excel(deviceOut, this.logoutForm, "设备导出", "POST");
      setTimeout(() => {
        this.DevicedialogVisible = false;
        this.$refs.logoutruleForm.resetFields();
        this.logoutForm = {};
      }, 500);
    },
    // 点击确定导入
    handlerdeviceIn() {
      const params = {
        file: this.excelFile,
        companyId: this.org_id,
        userId: this.userId,
        projectId: "",
        storeId: "",
        groupId: ""
      };
      this.postRequest(deviceAddAll, params).then(res => {
        if (res.code === 200) {
          this.$message.success("导入设备成功");
        } else if (res.code == 400) {
          this.$message.error(res.msg);
        }
      });
    },
    // 生成设备二维码
    handlerGenerateCode(deviceNumber, id, uuid) {
      this.deviceMakeQrcodeVisible = !this.deviceMakeQrcodeVisible;
      const params = {
        deviceNumber: deviceNumber,
        id: id,
        uuid: uuid
      };
      this.postRequest(deviceMakeQrcode, params).then(res => {
        if (res.code == 200) {
          this.devicePic = res.data;
        }
      });
    },
    // 初始化数据
    getDataInit() {
      if (this.org_id === "" || this.org_id === null || !this.org_id) {
      } else {
        this.getProject();
        this.getSelect();
      }
    },

    //获取项目列表
    getProject() {
      this.postRequest(getProject, { companyId: this.org_id }).then(res => {
        if (res.code === 200) {
          this.project = res.data;
          if (res.data.length > 0) {
            if (
              window.sessionStorage.getItem("projectId") == "" ||
              window.sessionStorage.getItem("projectId") == null
            ) {
              this.value = res.data[0].id;
            }
            this.getData(); //获取数据
            this.getprojectlist();
            this.getdeviceselect();
          } else {
            this.value = "";
            this.tableData = [];
          }
        } else {
          this.project = [];
          this.value = "";
        }
      });
    },
    handleCommand(command) {
      this.value = command;
      window.sessionStorage.setItem("projectId", this.value);
      this.getData();
      this.getprojectlist();
      this.getdeviceselect();
    },
    // 获取设备下啦
    getdeviceselect() {
      this.postRequest(getDeviceList, {
        companyId: this.org_id,
        projectId: this.value
      }).then(res => {
        this.device = res.data;
      });
    },
    // 根据项目id获取对应的数据
    getprojectlist() {
      const params = {
        projectId: this.value,
        companyId: this.org_id
      };
      this.postRequest(projectlist, params).then(res => {
        if (res.code == 200) {
          this.workingWordOption = res.data;
        }
      });
    },
    //搜索
    search() {
      this.currentPage = 1;
      this.getData();
    },
    //下拉框改变事件
    changeSelect(value, key) {
      this.formInline[key] = value;
      this.currentPage = 1;
      this.getData();
    },
    // 获取设备型号名字
    handlerModel(val) {
      // 根据选择的类型id匹配对应的类型名字
      let obj = {};
      obj = this.equipmentModel.find(item => {
        return item.id === val; //筛选出匹配数据
      });
      this.logoutForm.modelName = obj.name;
    },
    // 获取设备类型名字
    handlerType(val) {
      // 根据选择的类型id匹配对应的类型名字
      let obj = {};
      obj = this.typeList.find(item => {
        return item.id === val; //筛选出匹配数据
      });
      this.logoutForm.typeName = obj.name;
      this.postRequest(devicModelList, { companyId: this.org_id }).then(res => {
        let newarr = [];
        res.data.map(v => {
          if (val == v.deviceTypeId) {
            newarr.push(v);
          }
        });
        this.equipmentModel = newarr;
      });
    },
    // 获取设备监控项
    handlerMotior(val) {
      this.logoutForm.deviceMonitorId = []; //初始化数据
      this.logoutForm.deviceMonitorName = []; //初始化数据
      for (let i = 0; i <= val.length - 1; i++) {
        this.monitorList.find(item => {
          if (item.id == val[i]) {
            this.logoutForm.deviceMonitorId.push(item.id); //这里的value我改成了id
            this.logoutForm.deviceMonitorName.push(item.name); //这里的label我改成了roleName
          }
        });
      }
      // es6去重的方法
      function dedupe(array) {
        return Array.from(new Set(array));
      }
      this.logoutForm.deviceMonitorId = dedupe(this.logoutForm.deviceMonitorId);
      this.logoutForm.deviceMonitorName = dedupe(
        this.logoutForm.deviceMonitorName
      );
    },
    // 获取版本号
    getversion(val) {
      // 根据选择的类型id匹配对应的类型名字
      let obj = {};
      obj = this.versionList.find(item => {
        return item.id === val; //筛选出匹配数据
      });
      this.logoutForm.versionName = obj.versionNumber;
    },
    //获取搜索下拉列表事件
    async getSelect() {
      //设备列表
      // this.getdeviceselect();
      //设备类型列表
      this.typeList = await this.postRequest(devicTypeList, {
        companyId: this.org_id
      }).then(res => res.data);
      // /设备型号
      this.equipmentModel = await this.postRequest(devicModelList, {
        companyId: this.org_id
      }).then(res => res.data);
      //所属分支
      this.group = await this.postRequest(getStoreList, {
        companyId: this.org_id
      }).then(res => res.data);
    },
    getData() {
      const {
        code,
        name,
        version,
        type,
        branch,
        uuid,
        groupid
      } = this.formInline;
      const params = {
        type: 1, //1-平台设备管理列表,2-未分发设备列表
        projectId: this.value,
        pageSize: this.pageSize,
        pageNumber: this.currentPage,
        deviceNumber: code, //设备编号
        nameId: name, //设备名称
        typeId: type, //设备类型
        modelId: version, //设备型号
        storeId: branch, //所属分支
        companyId: this.org_id,
        uuid: uuid,
        groupid: groupid
      };
      this.postRequest(deviceList, params).then(res => {
        if (res.code === 200) {
          this.total = res.data.count;
          this.tableData = res.data.data;
          this.offCount = res.data.onCount;
          this.onCount = res.data.count;

          // res.data.data.map(v => {
          //   if (v.openStatus == 1) {
          //     this.updateList.map(item => {
          //       if (item.id == 9) {
          //         console.log(item.name)
          //         item.name = "哈哈哈哈哈";
          //       }
          //     });
          //   } else {
          //     this.updateList.map(item => {
          //       if (item.id == 9) {
          //         item.name = "设备开机11";
          //       }
          //     });
          //   }
          // });
        }
      });
    },
    //分页
    handleSizeChange(val) {
      //每页条数
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      window.sessionStorage.setItem("curentpage", val);
      //当前第几页
      this.currentPage = val;
      this.getData();
    },
    //设备调转
    turn(row) {
      this.currentRow = row;
      this.dialog = true;
      this.dialogForm = {
        project: row.projectName, //当前项目
        group: row.groupName, //当前组
        store: row.storeName, //当前门店
        project_id: "", //调转项目
        group_id: "", //调转组
        store_id: "" //调转门店
      };
    },
    //查看详情
    detail(data) {
      // 清空sessionStorage中存在的设备详情数据
      window.sessionStorage.removeItem("facilityData");
      // 将点击的这条设备详情数据存到sessionStorage中
      window.sessionStorage.setItem("facilityData", JSON.stringify(data));
      // 跳转到设备详情页面
      this.$router.push("/particulars");
    },
    //添加设备
    add() {
      this.visible = true;
      this.readonly = false;
      this.devicedisabled = false;
      this.devicedisabled1 = false;
      this.type = "添加设备";
      this.getMonitorList();
    },
    //编辑设备
    async edit(row) {
      this.currentRow = row;
      this.type = "编辑设备";
      this.readonly = false;
      this.visible = true;
      this.devicedisabled = true;
      this.devicedisabled1 = false;
      await this.getMonitorList();
      await this.getDetail(row.id);
    },
    //查看
    async view(row) {
      this.type = "查看设备";
      this.currentRow = row;
      this.visible = true;
      this.readonly = true;
      this.devicedisabled = true;
      this.devicedisabled1 = true;
      await this.getMonitorList();
      await this.getDetail(row.id);
    },
    getDetail(id) {
      this.postRequest(deviceDetails, { id }).then(res => {
        const form = res.data;
        this.ruleForm = {
          id: form.id,
          name: form.name, //设备名称
          code: form.deviceNumber, //设备编号
          type: form.typeId, //设备类型
          modelNumber: form.modelId, //设备型号,
          capacity: form.capacity,
          size: form.size,
          warranty: 1, //保修期
          temperature: form.uuid, //温控器ID
          version: form.version, //温控器版本
          // monitor: form.device_monitor.map(v => v.id), //设备监控项
          model: form.TmodelId, //温控器型号
          // detectionChip: form.detectionChip, //检测芯片ID
          manufacturer: form.cooperName, //制造厂商
          production: form.create_time, //生产日期
          warehouse: form.store_time, //入库日期
          manufacture: form.out_time, //出厂日期
          install: form.install_time //安装日期
        };
      });
    },
    //获取设备监控项类型和温控器版本号
    async getMonitorList() {
      this.versionList = await this.postRequest(getVersionList, {
        companyId: this.org_id
      }).then(res => res.data); //温控器版本号
      this.monitorList = await this.postRequest(deviceMonitorList, {
        companyId: this.org_id
      }).then(res => res.data); //设备监控项
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = {
            // id: this.value,
            user_id: this.userId,
            name: this.ruleForm.name, //设备名称
            deviceNumber: this.ruleForm.code, //设备编号
            companyId: this.org_id, // 公司id
            // detectionChip: this.ruleForm.detectionChip, //检测芯片ID
            // deviceMonitorId: this.ruleForm.monitor.join(","), //设备监控项
            typeId: this.ruleForm.type, //设备类型
            uuid: this.ruleForm.temperature, //温控器ID
            modelId: this.ruleForm.modelNumber, //设备型号
            TmodelId: this.ruleForm.model, //温控器型号
            version: this.ruleForm.version, //温控器版本号
            deviceGuarantee: this.ruleForm.warranty, //保修期
            projectId: this.ruleForm.project_id, //调转项目
            groupId: this.ruleForm.group_id, //调转组
            storeId: this.ruleForm.store_id, //调转门店
            capacity: this.ruleForm.capacity,
            size: this.ruleForm.size,
            cooperName:
              !this.ruleForm.manufacturer || this.ruleForm.manufacturer === null
                ? ""
                : this.ruleForm.manufacturer, //制造厂商
            create_time:
              !this.ruleForm.production || this.ruleForm.production === null
                ? ""
                : this.ruleForm.production, //生产日期
            install_time:
              !this.ruleForm.install || this.ruleForm.install === null
                ? ""
                : this.ruleForm.install, //安装日期
            store_time:
              !this.ruleForm.warehouse || this.ruleForm.warehouse === null
                ? ""
                : this.ruleForm.warehouse, //入库日期
            out_time:
              !this.ruleForm.manufacture || this.ruleForm.manufacture === null
                ? ""
                : this.ruleForm.manufacture //出厂日期
          };
          const url = this.type === "添加设备" ? deviceAdd : deviceEdit;
          if (this.type === "编辑设备") params.id = this.currentRow.id;
          this.confirmLoading = true;
          this.postRequest(url, params)
            .then(res => {
              this.confirmLoading = false;
              if (res.code === 200) {
                this.resetForm(formName);
                this.getData();
                this.getSelect();
              }
            })
            .catch(err => {
              this.confirmLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.ruleForm = {
        name: "", //设备名称
        code: "", //设备编号
        type: "", //设备类型
        modelNumber: "", //设备型号,
        warranty: "", //保修期
        temperature: "", //温控器ID
        version: "", //温控器版本
        monitor: [], //设备监控项
        model: "", //温控器型号
        // detectionChip: "", //检测芯片ID
        manufacturer: "", //制造厂商
        production: "", //生产日期
        warehouse: "", //入库日期
        manufacture: "", //出厂日期
        install: "" //安装日期
      };
      this.visible = false;
    },
    saveForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const params = {
            user_id: this.userId,
            device_id: this.currentRow.id, //设备id
            project_id: this.dialogForm.project_id, //项目id
            group_id: this.dialogForm.group_id, //组id
            store_id: this.dialogForm.store_id //门店id
          };
          this.confirmLoading = true;
          this.postRequest(deviceTransfer, params)
            .then(res => {
              this.confirmLoading = false;
              if (res.code === 200) {
                this.clearForm(formName);
                this.getData();
                this.getSelect();
              }
            })
            .catch(err => {
              this.confirmLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    clearForm(formName) {
      this.$refs[formName].resetFields();
      this.dialog = false;
      this.dialogForm = {
        project: "", //当前项目
        group: "", //当前组
        store: "", //当前门店
        project_id: "", //调转项目
        group_id: "", //调转组
        store_id: "" //调转门店
      };
    },
    //下拉框改变事件
    onChange(value, key) {
      this.dialogForm[key] = value;
      const url = key === "project_id" ? getWhereGroup : getWhereStore;
      const params = {
        [key === "project_id" ? "projectId" : "groupId"]: value
      };
      this.postRequest(url, params).then(res => {
        if (key === "project_id") {
          this.groupList = res.data; //调转组列表
        } else {
          this.storeList = res.data; //调转门店列表
        }
      });
    },
    // 点击升级
    upgrade(id, uuid) {
      this.titleName = "版本号升级";
      this.versionForm.uid = uuid;
      this.postRequest(sendF7, { uid: uuid }).then(res => {
        if (res.code == 200) {
          this.dialogVisibleWating = !this.dialogVisibleWating;
        }
      });
      this.timer = setInterval(() => {
        this.dialogVisibleWating = false;
        this.dialogVisible = true;
      }, 3000);
      const params = {
        deviceId: id
      };
      this.postRequest(getDeviceVer, params).then(res => {
        if (res.code == 200) {
          this.versionList = res.data;
        }
      });
    },
    // //  升级
    // handlerProgress() {
    //   this.postRequest(getVersionProgress, {
    //     uid: this.shengjiUid
    //   }).then(res => {
    //     if (res.code == 200) {
    //       this.progressLine = res.data.progress;
    //       if (res.data.status == 1) {
    //         this.ProgressdialogVisible = false;
    //       }
    //       if (res.data.status == 2) {
    //         this.$message.success("已完成");
    //         this.ProgressdialogVisible = false;

    //       }
    //       if (res.data.status == 3) {
    //         this.ProgressdialogVisible = false;
    //         clearInterval(this.progressTimer);
    //       }
    //     }
    //   });
    // },
    // 点击确定
    handlerVersion() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        //  --版本1
        // this.postRequest(sendF2, this.versionForm).then(res => {
        //   if (res.code == 200) {
        //     this.$message.success("升级版本成功");
        //     this.dialogVisible = false;
        //     this.getData();
        //     clearInterval(this.timer);
        //   } else {
        //     this.$message.error(res.msg);
        //   }
        // });
        this.shengjidialogVisible = !this.shengjidialogVisible;
        // this.ProgressdialogVisible = !this.ProgressdialogVisible;
        // this.progressTimer = setInterval(() => {
        //   this.handlerProgress();
        // }, 5000);

        // return false;
        this.postRequest(sendF0, { uid: this.shengjiUid }).then(res => {
          if (res.code == 200) {
            this.active++;
            this.postRequest(sendF4, { uid: this.shengjiUid }).then(res => {
              if (res.code == 200) {
                this.active++;
                this.postRequest(sendF7, { uid: this.shengjiUid }).then(res => {
                  if (res.code == 200) {
                    this.active++;
                    this.postRequest(sendF2, this.versionForm).then(res => {
                      if (res.code == 200) {
                        this.$message.success("升级版本成功");
                        this.active = 5;
                        this.shengjidialogVisible = false;
                        this.dialogVisible = false;
                        this.ProgressdialogVisible = true;
                        this.getData();
                        this.reload();
                      } else {
                        this.$message.error(res.msg);
                        this.shengjidialogVisible = false;
                        this.dialogVisible = !this.dialogVisible;
                        this.reload();
                      }
                    });
                  } else {
                    this.$message.error(res.msg);
                    this.shengjidialogVisible = false;
                    this.dialogVisible = !this.dialogVisible;
                    this.reload();
                  }
                });
              } else {
                this.$message.error(res.msg);
                this.shengjidialogVisible = false;
                this.dialogVisible = !this.dialogVisible;
                this.reload();
              }
            });
          } else {
            this.$message.error(res.msg);
            this.shengjidialogVisible = false;
            this.dialogVisible = !this.dialogVisible;
            this.reload();
          }
        });
        return false;
        // ---版本2
        this.postRequest(OneClickUpgrade, this.versionForm).then(res => {
          if (res.code == 200) {
            this.$message.success("升级版本成功");
            this.dialogVisible = false;
            this.shengjidialogVisible = false;
            this.updateList = [];
            this.getData();
          }
        });
      });
    },
    handlerQu() {
      this.dialogVisible = false;
      clearInterval(this.timer);
    },
    // 取消弹框
    handleClose() {
      this.dialogVisibleWating = false;
      this.dialogVisible = false;
      this.dialogVisibleToole = false;
      clearInterval(this.timer);
    },
    // 点击切换版本
    toogel(uuid) {
      this.tooleForm.uid = uuid;
      this.titleName = "切换模式";
      this.dialogVisibleWating = true;
      this.postRequest(sendF4, { uid: uuid }).then(res => {
        if (res.code == 200) {
          this.timer = setInterval(() => {
            this.dialogVisibleWating = false;
            this.dialogVisibleToole = true;
          }, 3000);
        }
      });
    },
    // 点击确定切换
    handlerTolle() {
      this.postRequest(sendF3, this.tooleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("切换模式");
          this.dialogVisibleToole = false;
          this.getData();
          clearInterval(this.timer);
        }
      });
    },
    // 点击读取温控参数
    handlersendRead(uuid) {
      this.postRequest(sendReadF1, { uid: uuid }).then(res => {
        if (res.code == 200) {
          const loading = this.$loading({
            lock: true,
            text: "读取中,请勿关闭!",
            background: "rgba(0, 0, 0, 0.5)"
          });
          setTimeout(() => {
            loading.close();
            this.$message.success("读取成功");
          }, 3000);
        }
      });
    },
    // 设备开机
    handlerDeviceOpen(uuid) {
      const params = {
        uid: uuid
      };
      this.postRequest(sendFBOpen, params).then(res => {
        if (res.code == 200) {
          const loading = this.$loading({
            lock: true,
            text: "开机中,请勿关闭!",
            background: "rgba(0, 0, 0, 0.5)"
          });
          loading.close();
          this.$message.success("开机成功");
          this.getData();
          this.selectArea = [];
        }
      });
    },
    //设备关机
    handlerDeviceOff(uuid) {
      const params = {
        uid: uuid
      };
      this.postRequest(sendFBOff, params).then(res => {
        if (res.code == 200) {
          const loading = this.$loading({
            lock: true,
            text: "待机中,请勿关闭!",
            background: "rgba(0, 0, 0, 0.5)"
          });
          loading.close();
          this.$message.success("待机成功");
          this.getData();
          this.selectArea = [];
        }
      });
    },
    // 点击更新设备触发的函数
    selectAreaChange(id, val, uid, openStatus) {
      // 获取版本号
      this.shengjiUid = uid;
      // if (val == 1) {
      //   this.$confirm("此操作将更新版本, 是否继续?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      //       this.postRequest(sendF0, { uid: uid }).then((res) => {
      //         if (res.code == 200) {
      //           this.$message({
      //             type: "success",
      //             message: "更新版本成功!",
      //           });
      //           this.getData();
      //         }
      //       });
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消更新",
      //       });
      //     });
      // } else if (val == 2) {
      //   this.$confirm("此操作将更新模式, 是否继续?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      //       this.postRequest(sendF4, { uid: uid }).then((res) => {
      //         if (res.code == 200) {
      //           this.$message({
      //             type: "success",
      //             message: "更新模式成功!",
      //           });
      //           this.getData();
      //         }
      //       });
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消更新模式",
      //       });
      //     });
      // } else if (val == 3) {
      //   this.$confirm("此操作将更新扇区, 是否继续?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      //       this.postRequest(sendF7, { uid: uid }).then((res) => {
      //         if (res.code == 200) {
      //           this.$message({
      //             type: "success",
      //             message: "更新扇区成功!",
      //           });
      //           this.getData();
      //         }
      //       });
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消更新扇区",
      //       });
      //     });
      // } else if (val == 4) {
      //   this.$confirm("此操作将更新制冷模式, 是否继续?", "提示", {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   })
      //     .then(() => {
      //       this.postRequest(sendF6, { uid: uid }).then((res) => {
      //         if (res.code == 200) {
      //           this.$message({
      //             type: "success",
      //             message: "更新制冷模式!",
      //           });
      //           this.getData();
      //         }
      //       });
      //     })
      //     .catch(() => {
      //       this.$message({
      //         type: "info",
      //         message: "已取消更新制冷模式",
      //       });
      //     });
      // } else if (val == 5) {
      //   this.toogel(uid);
      //  else if (val == 8) {
      //   this.handlersendRead(uid);
      // }
      if (val == 6) {
        this.versionForm.uid = uid;
        this.getMonitorList();
        this.dialogVisible = !this.dialogVisible;
      } else if (val == 7) {
        this.parameter(uid);
      } else if (val == 9) {
        this.handlerDeviceOpen(uid);
        // if (openStatus == 1) {
        //   this.handlerDeviceOff(uid);
        // } else if (openStatus == 2) {
        //   this.handlerDeviceOpen(uid);
        // }
      } else if (val == 10) {
        this.handlerDeviceOff(uid);
      }
    },
    // 点击温度参数配置
    parameter(uid) {
      this.$router.push("/Parameter");
      window.sessionStorage.setItem("deviceuid", uid);
    },
    // 获取公司的无分页列表
    // getcompanySel() {
    //   this.postRequest(companySel).then(res => {
    //     if (res.code == 200) {
    //       this.companySelList = res.data;
    //     }
    //   });
    // },
    // 拿到公司的id
    // handlercompanyId(val) {
    //   this.ruleForm.companyId = val;
    // },
    // 点击取消 清楚定时器 以及取消弹框
    handlercancel() {
      this.dialogVisibleWating = false;
      this.dialogVisible = false;
      this.dialogVisibleToole = false;
      clearInterval(this.timer);
    },
    // 点击升级进行一些列操作
    handlerUpVersion(uid) {
      this.versionForm.uid = uid;
      this.getMonitorList();
      this.dialogVisible = !this.dialogVisible;
    },
    next() {
      if (this.active++ == 6) this.active = 6;
      this.postRequest(sendF0, { uid: this.shengjiUid }).then(res => {
        if (res.code == 200) {
          this.active++;
          this.postRequest(sendF4, { uid: this.shengjiUid }).then(res => {
            if (res.code == 200) {
              this.active++;
              this.postRequest(sendF7, { uid: this.shengjiUid }).then(res => {
                if (res.code == 200) {
                  this.active++;
                  this.postRequest(sendF2, this.versionForm).then(res => {
                    if (res.code == 200) {
                      this.$message.success("升级版本成功");
                      this.active = 5;
                      this.shengjidialogVisible = false;
                      this.dialogVisible = !this.dialogVisible;
                      this.getData();
                    } else {
                      this.$message.error(res.msg);
                      this.shengjidialogVisible = false;
                      this.dialogVisible = !this.dialogVisible;
                    }
                  });
                } else {
                  this.$message.error(res.msg);
                  this.shengjidialogVisible = false;
                  this.dialogVisible = !this.dialogVisible;
                }
              });
            } else {
              this.$message.error(res.msg);
              this.shengjidialogVisible = false;
              this.dialogVisible = !this.dialogVisible;
            }
          });
        } else {
          this.$message.error(res.msg);
          this.shengjidialogVisible = false;
          this.dialogVisible = !this.dialogVisible;
        }
      });
      // if (this.active == 1) {
      //   this.postRequest(sendF0, { uid: this.shengjiUid }).then((res) => {
      //     if (res.code == 200) {
      //       this.$message({
      //         type: "success",
      //         message: "更新版本成功!",
      //       });
      //     }else {
      //       this.$message.error(res.msg);
      //         this.shengjidialogVisible = false;
      //        this.dialogVisible = !this.dialogVisible;
      //     }
      //   });
      // } else if (this.active == 2) {
      //   this.postRequest(sendF4, { uid: this.shengjiUid }).then((res) => {
      //     if (res.code == 200) {
      //       this.$message({
      //         type: "success",
      //         message: "更新模式成功!",
      //       });
      //     }else {
      //       this.$message.error(res.msg);
      //         this.shengjidialogVisible = false;
      //        this.dialogVisible = !this.dialogVisible;
      //     }
      //   });
      // } else if (this.active == 3) {
      //   this.postRequest(sendF7, { uid: this.shengjiUid }).then((res) => {
      //     if (res.code == 200) {
      //       this.$message({
      //         type: "success",
      //         message: "更新扇区成功!",
      //       });
      //     }else {
      //       this.$message.error(res.msg);
      //         this.shengjidialogVisible = false;
      //        this.dialogVisible = !this.dialogVisible;
      //     }
      //   });
      // } else if (this.active == 4) {
      //   this.postRequest(sendF2, this.versionForm).then((res) => {
      //     if (res.code == 200) {
      //       this.$message.success("升级版本成功");
      //       this.active = 5;
      //       this.shengjidialogVisible = false;
      //        this.dialogVisible = !this.dialogVisible;
      //       this.getData();
      //     } else {
      //       this.$message.error(res.msg);
      //         this.shengjidialogVisible = false;
      //        this.dialogVisible = !this.dialogVisible;
      //     }
      //   });
      // }
    }
  }
};
</script>

<style scoped>
.platformEquipment >>> .el-dialog__body {
  padding: 20px 20px 0;
  background: #fff;
}

.header {
  padding: 20px 30px;
  border: 1px solid #eaedf3;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 97%;
  margin: 0 auto;
}
.header_left {
  display: flex;
}
.formItem {
  width: 100%;
}

.primary {
  padding-left: 20px;
  margin-left: 20px;
  border-left: 1px solid #eaedf3;
}

.search {
  border: 1px solid #eaedf3;
  padding: 20px 25px 2px 25px;
  box-sizing: border-box;
  border-radius: 4px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(62, 63, 66, 1);
  cursor: pointer;
}

.cut {
  width: 20px;
  height: 20px;
  margin-left: 10px;
  display: block;
}

.table {
  margin-top: 30px;
}

.img {
  width: 80px;
  height: 120px;
  display: block;
  margin-right: 30px;
}

/*设备名称*/
.content {
  padding: 30px;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
}

.name {
  display: flex;
  align-items: center;
}

.icon {
  width: 16px;
  height: 16px;
  margin-right: 10px;
}

.label {
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #606266;
  margin-bottom: 10px;
}

.label:last-of-type {
  margin-bottom: 0;
}

/*设备状态*/
.status {
  width: min-content;
  padding: 3px 10px;
  border: 1px solid rgba(52, 170, 68, 1);
  border-radius: 4px;
  box-sizing: border-box;
  color: #34aa44;
  font-size: 12px;
}

/*正常*/
.normal {
  color: #34aa44;
  border-color: #34aa44;
}

/*告警*/
.warning {
  color: #e6492d;
  border-color: #e6492d;
}

/*维修*/
.maintain {
  color: #0077f8;
  border-color: #0077f8;
}

/*保养*/
.upkeep {
  color: #ffb300;
  border-color: #ffb300;
}

/*离线*/
.offline {
  color: #9ea0a5;
  border-color: #9ea0a5;
}
.deviceimg {
  position: relative;
  top: 0;
  left: 30%;
}
</style>
